<template>
  <div>
    <div class="top" v-if="!token">
      <div class="touxiang">
        <img @click="toLogin" src="@/assets/mobile.png" alt="" />
        <div class="text">点击登录</div>
      </div>
    </div>
    <div class="intop" v-else>
      <div class="shang">
        <div class="left">
          <img @click="toMessage" :src="photo" alt="" />
          <div class="name">{{ this.name }}</div>
        </div>
        <div class="right">
          <button @click="toChange">编辑资料</button>
        </div>
      </div>
      <div class="xia">
        <div class="info1 to" @click="jump('toutiao', 0)">
          <div class="mum">{{ info1.num }}</div>
          <div class="text">{{ info1.text }}</div>
        </div>
        <div class="info2 to" @click="jump('guanzhu', 1)">
          <div class="mum">{{ info2.num }}</div>
          <div class="text">{{ info2.text }}</div>
        </div>
        <div class="info3 to" @click="jump('fans', 2)">
          <div class="mum">{{ info3.num }}</div>
          <div class="text">{{ info3.text }}</div>
        </div>
        <div class="info4 to" @click="jump('zan', 3)">
          <div class="mum">{{ info4.num }}</div>
          <div class="text">{{ info4.text }}</div>
        </div>
      </div>
    </div>
    <div class="mid">
      <div class="side" @click="ask('收藏')">
        <i class="hmtt hmtt-shoucang"></i>
        <div class="zi">收藏</div>
      </div>
      <div class="side" @click="ask('历史')">
        <i class="hmtt hmtt-lishi"></i>
        <div class="zi">历史</div>
      </div>
    </div>
    <div class="mid2" @click="ask('小智同学')">
      <div class="zi">小智同学</div>
      <i class="hmtt hmtt-youjiantou"></i>
    </div>
    <div class="out" v-if="token">
      <button
        style="
          border: 0px;
          width: 100%;
          padding: 10px 16px;
          margin-top: 10px;
          font-size: 14px;
          color: #333333;
          background-color: #ffffff;
        "
        @click="goOut"
      >
        退出登录
      </button>
    </div>
  </div>
</template>

<script>
import { delToken, getToken } from "@/utils/storage";
import { Dialog } from "vant";
import { fanList, seeList, usermessage } from "@/api/user";

export default {
  data() {
    return {
      way: [
        { name: "收藏", path: "shoucang" },
        { name: "历史", path: "lishi" },
        { name: "小智同学", path: "OneXiaozhi" },
      ],
      token: getToken(),
      photo: "",
      name: "",
      info1: { num: 0, text: "头条" },
      info2: { num: 0, text: "关注" },
      info3: { num: 0, text: "粉丝" },
      info4: { num: 0, text: "获赞" },
    };
  },
  methods: {
    jump(way, number) {
      this.$router.push({
        name: way,
        params: {
          active: number,
        },
      });
    },
    toLogin() {
      this.$router.push({
        name: "Login",
      });
    },
    toMessage() {
      this.$router.push({
        name: "OneOwnmessage",
      });
    },
    toChange() {
      this.$router.push({
        name: "OneChangemessage",
      });
    },
    ask(value) {
      console.log(this.token);
      if (!this.token) {
        Dialog.confirm({
          message: "该功能需要登录，确认登录吗？",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            // on cancel
          });
        return;
      }
      // console.log(value);
      console.log(this.way);
      this.way.forEach((item) => {
        if (value === item.name) {
          this.$router.push({ name: item.path });
          // console.log(item.path);
        }
      });
    },
    goOut() {
      delToken();
      Dialog.confirm({
        title: "退户确认",
        message: "退出当前头条账号，将不能同步收藏，发布评论和云端分享等",
      })
        .then(() => {
          this.token = false;
          this.$router.go(0);
        })
        .catch(() => {
          // on cancel
        });
    },
    async getmessage() {
      try {
        const { data: data } = await usermessage();
        // console.log(data);
        this.photo = data.photo;
        this.name = data.name;
      } catch (err) {
        this.$toast("获取数据失败");
      }
    },
    async seelist() {
      try {
        const { data: data } = await seeList();
        // console.log(data);
        this.info2.num = data.total_count;
      } catch (err) {
        this.$toast("获取关注列表失败");
      }
    },
    async fanlist() {
      try {
        const { data: data } = await fanList();
        data.results = [
          {
            id: "10",
            name: "老六",
            photo: "",
            fans_count: "0",
            mutual_follow: "false",
          },
        ];
        data.total_count = data.results.length;
        this.info3.num = data.total_count;
        this.info4.num = 520;
      } catch (err) {
        this.$toast("获取关注列表失败");
      }
    },
  },
  created() {
    if (getToken()) {
      // console.log(getToken());
      this.getmessage();
      this.seelist();
      this.fanlist();
    }
  },
};
</script>

<style lang="less" scoped>
.top {
  display: flex;
  height: 182px;
  background: url("@/assets/banner.png") no-repeat center center;
  .touxiang {
    margin: auto;
    img {
      width: 66px;
      height: 66px;
      margin-bottom: 8px;
    }
    .text {
      color: #fff;
    }
  }
}
.intop {
  //display: flex;
  height: 102px;
  background: url("@/assets/banner.png") no-repeat center center;
  padding: 40px 20px;
  .shang {
    display: flex;
    width: 100%;
    height: 70px;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
      img {
        width: 66px;
        height: 66px;
        border-radius: 33px;
        border: 2px solid #ffffff;
      }
      .name {
        //line-height: 66px;
        color: #ffffff;
        margin-left: 20px;
      }
    }
    .right {
      button {
        width: 65px;
        height: 22px;
        font-size: 12px;
        border-radius: 11px;
        border: 0px;
      }
    }
  }
  .xia {
    display: flex;
    width: 100%;
    justify-content: space-between;
    .to {
      text-align: center;
      width: 68px;
      height: 40px;
      padding: 16px 8px;
      color: #ffffff;
    }
  }
}
.mid {
  display: flex;
  background-color: #fff;
  .side {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    width: 187.5px;
    height: 68px;
    i {
      font-size: 14px;
      margin-bottom: 5px;
      font-weight: 700;
    }
    .hmtt-shoucang {
      color: #ee5386;
    }
    .hmtt-lishi {
      color: #ffb25d;
    }
    .zi {
      font-size: 12px;
      color: #999999;
    }
  }
}
.mid2 {
  display: flex;
  justify-content: space-between;
  height: 24px;
  line-height: 24px;
  padding: 10px 16px;
  font-size: 14px;
  background-color: #fff;
  margin-top: 10px;
}
</style>
